import { WeaEchart } from 'ecCom';
import * as mobx from 'mobx'

export default class FnaBarChart extends React.Component {

	constructor(props) {
        super(props);
        let data = [220, 182, 191, 234, 290, 330, 310, 123, 442, 321, 90, 149];

        let yMax = 500;
		let dataShadow = [];

		for (let i = 0; i < data.length; i++) {
		    dataShadow.push(yMax);
		}

        this.state = {
            categories : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"],
            series : [{
                name:'预算数',
                type:'bar',
                data:[1195.00, 2500.00]
            },
            {
                name:'审批中费用',
                type:'bar',
                data:[0.00, 762.00]
            },
            {
                name:'实际发生数',
                type:'bar',
                data:[0.00, 3.00]
            },
            {
                name:'可用预算数',
                type:'bar',
                data:[1195.00, 1735.00]
            }],
            yAxis: {
                //min : 0,
                //max : 2700
                
            },
            tooltip: {
                show : true
               
            },
            grid: {
                //left:40
            },
            color:['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],
            
            option:{
                title: {
                	text: '',
        			subtext: '',
                    subtextStyle:{
                        color :'#333'
                    },
                    x:'center'
                },
                tooltip: {},
                xAxis: {
                    data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
                    axisLabel: {
			            inside: true,
			            textStyle: {
			                color: '#fff'
			            }
		        	},
			        axisTick: {
			            show: false
			        },
			        axisLine: {
			            show: false
			        },
			        z: 10
                },
                yAxis: {
                    axisLine: {
			            show: false
			        },
			        axisTick: {
			            show: false
			        },
			        axisLabel: {
			            textStyle: {
			                color: '#999'
			            }
			        },
			        /*splitArea: {
			            show: true
			        }*/
                },
                tooltip: {
                    show : true      
                },
                grid: {
                    //left:40
                },
                series: [
                	 { // For shadow
			            type: 'bar',
			            itemStyle: {
			                normal: {color: 'rgba(0,0,0,0.05)'}
			            },
			            barGap:'-100%',
			            barCategoryGap:'40%',
			            data: dataShadow,
			            animation: false
			        },
			        {
			            type: 'bar',
			            itemStyle: {
			                normal: {
			                    color: new echarts.graphic.LinearGradient(
			                        0, 0, 0, 1,
			                        [
			                            {offset: 0, color: '#83bff6'},
			                            {offset: 0.5, color: '#188df0'},
			                            {offset: 1, color: '#188df0'}
			                        ]
			                    )
			                },
			                emphasis: {
			                    color: new echarts.graphic.LinearGradient(
			                        0, 0, 0, 1,
			                        [
			                            {offset: 0, color: '#2378f7'},
			                            {offset: 0.7, color: '#2378f7'},
			                            {offset: 1, color: '#83bff6'}
			                        ]
			                    )
			                }
			            },
			            data: data
        			}

                ]
            }
        }
    }


	shouldComponentUpdate(nextProps, nextState) {
        let { data } = this.props;
        if( JSON.stringify(data) == JSON.stringify(nextProps.data)){
            return false;
        } else {
            return true;
        }
	}
	

	componentDidUpdate() {
        if(this.refs != undefined){
            if(this.refs.chart2 != undefined){
                this.refs.chart2.paint();//重新渲染
            }
        }
	}

    getDataShow(barDatas,yMax){
        let dataShadow = [];
        for (let i = 0; i < barDatas.length; i++) {
            dataShadow.push(yMax);
        }
        return dataShadow;
    }

    chartAction = (chart) => {
        //防止多次onclick
        chart.off("click");
        chart.on('click', (params) => {
          let {mainStore} = this.props;
          let {form,pageType} = mainStore;
          let searchParamsAd = form.getFormParams();
          let seriesType = params.seriesType;
          let orgIds = searchParamsAd.orgIds;
          let year = searchParamsAd.year;
          let month = params.name.substring(0,params.name.length-1);
          let color = params.color;

          if("FnaProjectExpense" == pageType){
                orgIds = searchParamsAd.projectId;
          }else if("FnaCompactExpense" == pageType){
                orgIds = searchParamsAd.compactNu;
          }else if("FnaCustomerExpense" == pageType){
                orgIds = searchParamsAd.customerId;
          }

          if(color.type == 'linear' && pageType != 'FnaSummaryExpense'){//1、有数据的  2、费用汇总不允许点击
            window.open("/spa/fna/index_mobx.html#/main/fna/fnaExpenseCommonList?seriesType="+seriesType+"&orgIds="+orgIds+
            "&year="+year+"&month="+month+"&pageType="+pageType);
          }
        });
    }

	render() {
		let {option} = this.state;

        const {maxAmount,xAxisData,barDatas,data} = this.props;
        
        //X坐标数据
        option.xAxis.data = xAxisData;
        //阴影数据
        option.series[0].data = this.getDataShow(barDatas,maxAmount);
        //真实数据
        option.series[1].data = barDatas;

        if(JSON.stringify(data) != '{}'){
            return (
                <div style={{height: 640}}>   
                    <div style={{height: 560}}>
                        <WeaEchart ref="chart2"
                           chartName={option.title}
                           categories={option.xAxis}  
                     
                           option={option}
                           chartAction={this.chartAction}
                           ecId={`${this && this.props && this.props.ecId || ''}_WeaEchart@FnaBarChart`}
                        />
                    </div>
                </div>
            );
        }else{
            return( <div style={{height: 440}}></div>);
        }
	}	

}
